<template>
    <div ref="bannerRef" class="banner-container" :style="{ height: (height ? height : bannerHeight) + 'px' }"
        @mouseenter="mouseenterEvent" @mouseleave="mouseleaveEvent">
        <ul class="fade-banner" :style="{ height: (height ? height : bannerHeight) + 'px' }">
            <li class="rotation-banner" ref="rotationRef"
                :style="{ height: height + 'px', backgroundImage: 'url(' + item.img + ')' }"
                v-for="(item, index) in listBanner" :key="index" @click="bannerLink">
            </li>
        </ul>
        <span class="left-button" @click="switchBanner('left')">
            <!-- <img src="../assets/logo.png" class="icon" /> -->
            <span class="-button-content"></span>
        </span>
        <span class="right-button" @click="switchBanner('right')">
            <!-- <img src="../assets/logo.png" class="icon" />left -->
            <span class="right-button-content"></span>
        </span>
        <ul class="banner-indicator">
            <span v-for="index in listBanner.length" :key="index" class="barExternal" @click="swatchIndicator(index - 1)">
                <li ref="indicatorRef" class="default-indicator" :class="{ 'active-indicator': index - 1 === 0 }"></li>
            </span>
        </ul>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps, getCurrentInstance, defineEmits, onUpdated } from "vue";
const { proxy } = getCurrentInstance();

// const listBanner = ref([]);
// console.log(proxy.WorkCaseList);
// for(let i = 0;i<proxy.WorkCaseList.length;i++){
//         if(proxy.WorkCaseList[i].haveBanner){
//             listBanner.value.push({
//                 img: proxy.WorkCaseList[i].caseBanner,
//                 url: "/caseDetail/" + proxy.WorkCaseList[i].id
//             })
//     }
// }
const props = defineProps({
    listBanner: {
        type: Array,
        default: () => []
    },
    //banner自动播放的间隔时间
    interval: {
        type: Number,
        default: 3000
    },
    //是否自动播放banner
    autoSwitch: {
        type: Boolean,
        default: false
    },
    //banner高度
    setHeight: {
        type: Number
    },
    imgCenter: {
        type: Boolean,
        default: false
    }
})
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
let bannerHeight = ref(browerWidth * 0.38)
window.onresize = function () {
    browerWidth = window.innerWidth;
    bannerHeight.value = browerWidth * 0.38;
    // console.log(bannerHeight.value)
}
const emit = defineEmits(['changeLogTextColor']);
const changeLogTextColor = (flag) => {
    console.log('banner');
    emit('changeLogTextColor', flag);
}
let height = props.setHeight;
let tiemr = ref(null);
const switchIndex = ref(0);
const rotationRef = ref();
const indicatorRef = ref();
const description = ref(null); //图片描述
// let height = unref(props.setHeight);
// let height = ref(bannerHeight.value);


//banner播放方式
const addTimer = () => {

    if (props.autoSwitch === true) {
        //自动播放
        tiemr = setInterval(() => {
            switchBanner("right");
        }, props.interval);
    }
};


// 清除定时器
const stopInterval = () => {
    clearInterval(tiemr);
};
//banner文字提示（非必须）
const switchDescription = () => {
    if (props.listBanner) {
        props.listBanner.map((item, index) => {
            if (index === switchIndex.value) {
                description.value = item.description;
            }
        });
    }
};

//鼠标进入停止自动播放（非必须）
const mouseenterEvent = () => {
    stopInterval();
    switchDescription();
};

//鼠标离开自动播放（非必须）
const mouseleaveEvent = () => {
    addTimer();
};

//上一张和下一张图片透明度切换
const changePicture = (num) => {
    for (let i of rotationRef.value) {
        i.style.opacity = "0";
    }
    toBannerBar(num);
    if (rotationRef.value.length !== 0) {
        rotationRef.value[num].style.opacity = "1";
    }
};

//底部小横条颜色切换
const toBannerBar = (val) => {
    for (let i of indicatorRef.value) {
        i.style.backgroundColor = "rgba(221, 221, 221, 0.541)";
    }
    if (indicatorRef.value.length !== 0) {
        indicatorRef.value[val].style.backgroundColor = "#ffffff";
    }
};

//左右切换banner
const switchBanner = (value) => {
    if (value === "right") {
        switchIndex.value++;
        if (switchIndex.value === props.listBanner.length) {
            switchIndex.value = 0;
        }
        console.log(props.listBanner[switchIndex.value].bannerColorBlack);
        changeLogTextColor(props.listBanner[switchIndex.value].bannerColorBlack);
    } else {
        switchIndex.value--;
        if (switchIndex.value === -1) {
            switchIndex.value = props.listBanner.length - 1;
        }
    }
    changePicture(switchIndex.value);
    switchDescription();
};

//底部横条切换banner
const swatchIndicator = (value) => {
    switchIndex.value = value;
    changePicture(switchIndex.value);
    switchDescription();
};

//banner链接跳转（（非必须）
const bannerLink = () => {
    if (props.listBanner) {
        props.listBanner.map((item, index) => {
            if (index === switchIndex.value && item.url !== "" && item.url !== null) {
                window.location.href = "/caseDetail/"+item.url;
            }
        });
    }
};

onMounted(() => {

    addTimer();

    if (props.imgCenter) {
        for (let i of rotationRef.value) {
            i.style.backgroundPosition = "center";
            i.style.backgroundSize = "auto";
        }
    }
});
onUpdated(() => {
    changeLogTextColor(props.listBanner[switchIndex.value].bannerColorBlack);
})
onUnmounted(() => {
    stopInterval();
});

</script>

<style lang="scss" scoped>
.banner-container {
    position: relative;

    .fade-banner {
        position: relative;
        list-style: none;
    }

    .rotation-banner {
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        background-position: top;
        background-attachment: fixed;
        background-repeat: no-repeat;
        position: absolute;
        background-size: 100%;
        opacity: 0;
        // transition-duration: 3s;
        transition-duration: 1.5s;
        width: 100%;

        &:first-child {
            opacity: 1;
        }
    }

    .left-button {
        position: absolute;
        cursor: pointer;
        top: 50%;
        left: 25px;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: rgb(31, 45, 61, 0.3);
        border-radius: 50%;
        opacity: 1;

        &:hover {
            .left-button-content {
                width: 40px;
            }
        }

        .left-button-content {
            position: absolute;
            top: 50%;
            height: 2px;
            background-color: #fff;
            border-radius: 1px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            width: 0px;

            &::before {
                content: "";
                width: 30px;
                position: absolute;
                top: 50%;
                height: 2px;
                left: 0;
                bottom: 0;
                background-color: #fff;
                border-radius: 1px;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transform-origin: left;
                -ms-transform-origin: left;
                transform-origin: left;
            }

            &::after {
                content: "";
                width: 30px;
                position: absolute;
                top: 50%;
                height: 2px;
                left: 0;
                top: 0;
                background-color: #fff;
                border-radius: 1px;
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transform-origin: left;
                -ms-transform-origin: left;
                transform-origin: left;
            }
        }


    }

    .right-button {
        position: absolute;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        top: 50%;
        right: 25px;
        // background-color: rgb(31, 45, 61, 0.3);
        border-radius: 50%;
        opacity: 1;

        &:hover {
            .right-button-content {
                width: 40px;
            }
        }

        .right-button-content {
            position: absolute;
            top: 50%;
            height: 2px;
            background-color: #fff;
            border-radius: 1px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            width: 0px;

            &::before {
                content: "";
                width: 30px;
                position: absolute;
                top: 50%;
                height: 2px;
                right: 0;
                bottom: 0;
                background-color: #fff;
                border-radius: 1px;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transform-origin: right;
                -ms-transform-origin: right;
                transform-origin: right;
            }

            &::after {
                content: "";
                width: 30px;
                position: absolute;
                top: 50%;
                height: 2px;
                right: 0;
                top: 0;
                background-color: #fff;
                border-radius: 1px;
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transform-origin: right;
                -ms-transform-origin: right;
                transform-origin: right;
            }
        }
    }

    .icon {
        height: 20px;
        width: 20px;
    }

    .banner-indicator {
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        cursor: pointer;
        display: flex;

        .barExternal {
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;

            .default-indicator {
                border-radius: 50%;
                width: 12px;
                height: 12px;
                background: rgba(221, 221, 221, 0.57);
                display: block;
                float: left;
                margin-right: 10px;
                // &:first-child {
                //   background: #ffffff;
                // }
            }

            .active-indicator {
                background: rgba(221, 221, 0, 1)
            }
        }
    }

    &:hover {
        .left-button {
            opacity: 1;
        }

        .right-button {
            opacity: 1;
        }
    }
}</style>